<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('模型列表')" />
	<style>
		.status-btn {
			display: inline-block;
			padding: 1px 20px;
			margin: 0px;
			margin-top: 5px;
			background-color: #5bc0de; /* 可以根据需要调整颜色 */
			color: white;
			text-decoration: none;
			border-radius: 5px;
			transition: background-color 0.3s;
		}

		.status-btn:hover {
			background-color: #31b0d5; /* 悬停时的颜色变化 */
		}

		/*按钮下间距*/
		.button-spacing {
			margin-bottom: 5px; /* 根据需要调整 */
		}
	</style>
</head>
<body class="gray-bg">
     <div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="formId">
					<div class="select-list">
						<ul>
							<li>
								模型名称：<input type="text" name="modelName"/>
							</li>

							<li>
								上传时间：<input type="text" name="uploadTime"/>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			
	        <div class="btn-group-sm" id="toolbar" role="group">
				<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="deep_learning:model:add">
					<i class="fa fa-plus"></i> 添加
				</a>
				<li>
					<!--                通过点击按钮来切换显示的数据集状态-->
					<a class="status-btn" data-status="self">仅自己</a>
					<a class="status-btn" data-status="all">全部</a>
				</li>
			</div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" class="table table-bordered" data-mobile-responsive="true"></table>
			</div>
		</div>
	</div>
    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('deep_learning:model:edit')}]];
        var removeFlag = [[${@permission.hasPermi('deep_learning:model:remove')}]];
        var prefix = ctx + "deep_learning/model";
		var currentUserId = null;
		var options=null;
		var optionsAdmin= null;
		var tableStatus='仅自己';

		// 根据不同的请求来刷新
		function refreshWithOptions(url) {

			//普通用户显示的表格
			options = {
				// url: prefix + "/list",
				// url: prefix + "/listWithParas",
				url:url,
				createUrl: prefix + "/add",
				updateUrl: prefix + "/edit/{id}",
				removeUrl: prefix + "/remove",
				removeWithDbUrl: prefix + "/removeWithDb",
				exportUrl: prefix + "/export",
				modalName: "模型",
				showExport: true,
				sidePagination: 'client', // 前端分页
				columns: [
					{
						field : 'id',
						title : 'id',
						visible: false
					},
					{
						field : 'modelName',
						title : '模型名称',
						align: 'center',
						sortable: true,
						formatter: function(value, row, index) {
							return formatModelName(value, row.id); // 调用自定义的格式化函数
						}
					},
					{
						field: 'userName',
						title: '归属用户',
						align: 'center',
						sortable: true
					},
					{
						field : 'fitHeight',
						title : '适用图像高度',
						align: 'center',
						sortable: true
					},
					{
						field : 'fitWidth',
						title : '适用图像宽度',
						align: 'center',
						sortable: true
					},
					{
						field : 'inputChannel',
						title : '输入通道数',
						align: 'center',
						sortable: true
					},
					{
						field : 'outputChannel',
						title : '输出通道数',
						align: 'center',
						sortable: true
					},
					{
						field : 'uploadTime',
						title : '上传时间',
						align: 'center',
						sortable: true
					},

					{
						title: '操作',
						align: 'center',
						formatter: function(value, row, index) {
							if (row.userId === currentUserId) {
								var actions = [];
								// actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
								actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.removeWithDb(\'' + row.id + '\', \'' + row.location + '\')"><i class="fa fa-trash"></i>删除</a> ');

								return actions.join('');
							}

						}
					}]
			};
			//管理员显示的表
			optionsAdmin = {
				// url: prefix + "/list",
				// url: prefix + "/listWithParas",
				url:url,
				createUrl: prefix + "/add",
				updateUrl: prefix + "/edit/{id}",
				removeUrl: prefix + "/remove",
				removeWithDbUrl: prefix + "/removeWithDb",
				exportUrl: prefix + "/export",
				modalName: "模型",
				showExport: true,
				sidePagination: 'client', // 前端分页
				columns: [
					{
						field : 'id',
						title : 'id',
						visible: false
					},
					{
						field : 'modelName',
						title : '模型名称',
						align: 'center',
						sortable: true,
						formatter: function(value, row, index) {
							return formatModelName(value, row.id); // 调用自定义的格式化函数
						}
					},
					{
						field: 'userName',
						title: '归属用户',
						align: 'center',
						sortable: true
					},
					{
						field : 'fitHeight',
						title : '适用图像高度',
						align: 'center',
						sortable: true
					},
					{
						field : 'fitWidth',
						title : '适用图像宽度',
						align: 'center',
						sortable: true
					},
					{
						field : 'inputChannel',
						title : '输入通道数',
						align: 'center',
						sortable: true
					},
					{
						field : 'outputChannel',
						title : '输出通道数',
						align: 'center',
						sortable: true
					},
					{
						field : 'uploadTime',
						title : '上传时间',
						align: 'center',
						sortable: true
					},
					{
						title: '操作',
						align: 'center',
						formatter: function(value, row, index) {
							var actions = [];
							actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
							actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.removeWithDb(\'' + row.id + '\', \'' + row.location + '\')"><i class="fa fa-trash"></i>删除</a> ');

							return actions.join('');
						}
					}]
			};

			if (currentUserId!=1){
				$.table.destroy()
				$.table.init(options);
			}else {
				$.table.destroy()
				$.table.init(optionsAdmin);
			}
			// $.table.refresh();
			var refreshButton = $("button[name='refresh']");
			console.log(refreshButton)
			//解除按钮点击事件绑定
			refreshButton.off("click");
			refreshButton.click(function () {
				console.log("refreshButton")
				console.log("tableStatus",tableStatus)
				switch (tableStatus){
					case '仅自己':
						$.table.destroy();
						refreshWithOptions(prefix+"/listWithOnlyUserId")
						break;
					case '用户全部':
						$.table.destroy();
						refreshWithOptions(prefix+"/listWithParas")
						break;
					case '管理员全部':
						$.table.destroy();
						refreshWithOptions(prefix+"/list")
						break;
				}
			});
		}

		var status = "self"; // 默认显示自己的数据集


		$.ajax({
			url: '/deep_learning/app01Dataset/currentUser', // 此地址返回当前用户的 userId
			method: 'GET',
			success: function (response) {
				console.log("response.userId", response.userId)
				currentUserId = response.userId;
			},
			error: function (xhr, status, error) {
				console.error('请求当前用户信息失败:', error);
			}
		}).then(function () {
			console.log("currentUserId", currentUserId)
			tableStatus='仅自己';
			refreshWithOptions(prefix+"/listWithOnlyUserId")
		});


		//
		// 给所有状态按钮绑定点击事件
		$(".status-btn").click(function () {
			// 获取按钮上的状态属性
			status = $(this).data("status");
			// console.log("status: " + status);
			if (status === "self") {
				// 仅自己
				console.log("status",status)
				// refreshTableWithOnlyUserId(currentUserId);
				// bindRefreshButton(currentUserId)
				tableStatus='仅自己'
				refreshWithOptions(prefix+"/listWithOnlyUserId")
				// $.table.init(options)
			} else if (status === "all") {
				// 直接刷新
				if(currentUserId!=1){
					tableStatus='用户全部';
					refreshWithOptions(prefix+"/listWithParas")
				}else {
					console.log("点击了管理员全部")
					tableStatus='管理员全部';
					refreshWithOptions(prefix+"/list")
				}
			}
		});

		window.addEventListener('message', function (event) {
			console.log("收到模型来自子窗口的消息：")
			setTimeout(function () {
				let refreshButton = $("button[name='refresh']");
				refreshButton.click();
			}, 10)
		});

		function formatModelName(modelName, modelId) {
			let formattedName = modelName;
			// console.log("modeId",modelId)
			$.ajax({
				url: '/deep_learning/model/getIsWeight/'+modelId,
				type: 'GET',
				async: false, // 设为同步请求，以便函数返回格式化后的名称
				success: function(response) {
					if (response.isWeight) {
						formattedName = `<strong>${modelName}*</strong>`; // 加星号并加黑字体
					}
				},
				error: function() {
					console.error('请求失败');
				}
			});
			return formattedName;
		}
    </script>



</body>
</html>